<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  
  },
}
</route>
<template>
  <Loyout class="index-page" bgc="#F3F8FE">
    <view class="index-header h-300 flex-row">
      <view class="headerContent">
        <image class="logoBox" src="@/static/homeImg/code.png" mode="scaleToFill" />
        <text class="title">让工作变得简单一些！</text>
      </view>
    </view>
    <view class="busniss-box plr-30 flex-row flex-warp flex1 pt-40">
      <view v-for="item in pages" :key="item.name" @click="toPage(item)"
        class="busniss-item w-285 m-30 h-250 flex-center flex-column br-50">
        <!-- <image :src="item.icon" class="w-200 h-200" /> -->
        <view class="iconBox w-150 h-150 flex-center" :class="`${item.bgcImg}`">
          <view class="bgcTop"></view>
          <view class="bgcLeft"></view>
          <image :src="item.icon" class="w-90 h-90" alt="" />
        </view>
        <text class="mt-10">{{ item.name }}</text>
      </view>
    </view>
  </Loyout>
</template>

<script lang="ts" setup>
import Loyout from '@/layouts/index.vue'
import out from '@/static/homeImg/out.png'
import input from '@/static/homeImg/input.png'
import dataDel from '@/static/homeImg/dataDel.png'
import dataD from '@/static/homeImg/dataD.png'
import dataU from '@/static/homeImg/dataU.png'
const pages = [
  {
    path: '/pages/demo/index',
    name: '入库核销',
    bgcImg: 'bgc1',
    icon: input,
  },
  {
    path: '/pages/outorder/index',
    name: '出库核销',
    bgcImg: 'bgc2',
    icon: out,
  },
  {
    path: '/pages/user/loaddata',
    name: '数据下载',
    bgcImg: 'bgc3',
    icon: dataD,
  },
  {
    path: '/pages/upload/index',
    bgcImg: 'bgc4',
    name: '数据上传',
    icon: dataU,
  },
  {
    path: '/pages/demo/index',
    bgcImg: 'bgc5',
    name: '数据删除',
    icon: dataDel,
  },
]
// 测试 uni API 自动引入
onLoad(() => {
  console.log('Home onLoad')
})

onShow(() => {
  console.log('Home Show')
})

const toPage = (item: any) => {
  uni.navigateTo({
    url: item.path,
  })
}
</script>

<style lang="scss">
.index-page {
  .index-header {
    background-image: linear-gradient(75deg, rgb(0, 115, 255) 25%, rgb(0, 170, 255) 75%);

    .headerContent {
      align-items: center;
      height: 110rpx;
      padding: 36rpx;
    }

    .logoBox {
      width: 100rpx;
      height: 100rpx;
      margin-right: 28rpx;
    }

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #fff;
    }
  }

  .busniss-item {
    background-color: #fff;
    border-radius: 40rpx;
  }

  .busniss-box {
    margin-top: -42rpx;
    background-color: #f3f8fe;
    border-radius: 48rpx 48rpx 0 0;
  }

  .iconBox {
    position: relative;
    overflow: hidden;
    border-radius: 50%;

    .bgcTop,
    .bgcLeft {
      position: absolute;
      width: 80rpx;
      height: 80rpx;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
    }

    .bgcTop {
      right: -30rpx;
      bottom: 50%;
    }

    .bgcLeft {
      top: 50%;
      left: -30rpx;
    }
  }

  .bgc1 {
    background-image: linear-gradient(75deg, rgb(252, 212, 49) 30%, rgb(253, 183, 27) 75%);
  }

  .bgc2 {
    background-image: linear-gradient(75deg, rgb(55, 212, 253) 30%, rgb(23, 178, 253) 75%);
  }

  .bgc3 {
    background-image: linear-gradient(75deg, rgb(21, 230, 178) 30%, rgb(21, 225, 199) 75%);
  }

  .bgc4 {
    background-image: linear-gradient(75deg, rgb(194, 129, 251) 30%, rgb(173, 122, 250) 75%);
  }

  .bgc5 {
    background-image: linear-gradient(75deg, rgb(172, 223, 25) 30%, rgb(85, 207, 74) 75%);
  }

  .bgc6 {
    background-image: linear-gradient(75deg, rgb(244, 166, 54) 30%, rgb(253, 115, 29) 75%);
  }
}
</style>
